<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组织冒泡事件-商品列表</title>
    <link rel="stylesheet" href="../5.1/css/goods.css">
</head>
<body>
    <div class="container">
        <div class="goods">
            <img class="gimg" src="../5.1/img/goods.jpg">
            <div class="tit">
                <span>新疆葡萄</span>
                <span>$9.00/斤</span>
                <img id="h" src="./img/heart.png" />
                <img id="hf" style="display:none;" src="./img/heart_fill.png" />
            </div>
        </div>
    </div>
</body>
<script src="../jquery-3.6.3.js"></script>
<script>
    //监控页面加载
    $(document).ready(function(){

            $(".goods").click(function(e){
                location.href = "./demo5.html"//点击商品跳转到详情页
            })
        /**两张图片切换效果
         * 第一步：写两个图片 第二个图片样式隐藏
         * 第二步；点击第一个图片，把第一个图片隐藏 第二个图片显示
         * jQury实现方案；点击第一个图片，使用jQuery hide()方法隐藏第一个图片，
         *               show()方法显示第二个图片
         * 第三步：点击第二个图片，把第一个样式显示 第二个图片隐藏
         * jQury实现方案；点击第一个图片，使用jQuery hide()方法隐藏第二个图片，
         *               show()方法显示第一个图片
        */
       $("#h").click(function(e){
        // 普通切换方案
        // $("#h").css("display","none");
        // $("#hf").css("display","inline");
        $("#h").hide();
        $("#hf").show();
        e.stopPropagation();//阻止点击事件冒泡跳转到父元素
       })
       $("#hf").click(function(e){
        // 普通方案切换
        // $("#hf").css("display","none");
        // $("#h").css("display","inline");
        $("#hf").hide();
        $("#h").show();
        e.stopPropagation();//阻止点击事件冒泡跳转到父元素
       })
    })
</script>
</html>